<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陶瓷文化展示</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #8B4513;
            --secondary-color: #D2B48C;
            --accent-color: #A0522D;
            --light-color: #F5F5DC;
            --dark-color: #3E2723;
        }

        body {
            font-family: "Noto Serif SC", serif;
            background-color: var(--light-color);
            color: var(--dark-color);
        }

        .navbar {
            background-color: var(--primary-color);
        }

        .hero-section {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1547981609-4b6bf67b7d12') center/cover no-repeat;
            color: white;
            padding: 120px 0;
            text-align: center;
        }

        .section-title {
            position: relative;
            margin-bottom: 40px;
            padding-bottom: 15px;
        }

        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: var(--accent-color);
        }

        .ceramic-card {
            transition: transform 0.3s, box-shadow 0.3s;
            border: none;
            overflow: hidden;
            margin-bottom: 30px;
        }

        .ceramic-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .ceramic-card img {
            height: 250px;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .ceramic-card:hover img {
            transform: scale(1.05);
        }

        .card-body {
            background-color: white;
        }

        .history-section {
            background-color: white;
            padding: 80px 0;
        }

        .timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background-color: var(--secondary-color);
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
        }

        .timeline-item {
            padding: 10px 40px;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            background-color: white;
            border: 4px solid var(--accent-color);
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }

        .left {
            left: 0;
        }

        .right {
            left: 50%;
        }

        .left::after {
            right: -12px;
        }

        .right::after {
            left: -12px;
        }

        .timeline-content {
            padding: 20px 30px;
            background-color: white;
            position: relative;
            border-radius: 6px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 40px 0;
        }

        .admin-panel {
            background-color: #f8f9fa;
            min-height: 100vh;
            padding-top: 20px;
        }

        .admin-sidebar {
            background-color: var(--dark-color);
            color: white;
            min-height: 100vh;
            padding-top: 20px;
        }

        .admin-sidebar .nav-link {
            color: rgba(255,255,255,0.8);
            padding: 10px 20px;
            margin: 5px 0;
        }

        .admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active {
            color: white;
            background-color: rgba(255,255,255,0.1);
        }

        .form-container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.05);
        }

        .carousel-item img {
            height: 500px;
            object-fit: cover;
        }

        @media screen and (max-width: 768px) {
            .timeline::after {
                left: 31px;
            }

            .timeline-item {
                width: 100%;
                padding-left: 70px;
                padding-right: 25px;
            }

            .timeline-item::after {
                left: 18px;
            }

            .right {
                left: 0;
            }
        }
    </style>
</head>
<body>
<!-- 前台展示部分 -->
<div id="frontend">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-vase"></i> 陶瓷文化
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#home">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#types">陶瓷种类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#history">历史发展</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#gallery">作品展示</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="showAdminPanel()">管理后台</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 首页横幅 -->
    <section id="home" class="hero-section">
        <div class="container">
            <h1 class="display-4 fw-bold">中国陶瓷文化</h1>
            <p class="lead">探索千年陶瓷艺术的魅力与传承</p>
            <a href="#types" class="btn btn-light btn-lg mt-3">探索更多</a>
        </div>
    </section>

    <!-- 陶瓷种类 -->
    <section id="types" class="py-5">
        <div class="container">
            <h2 class="text-center section-title">陶瓷种类</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="card ceramic-card">
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b" class="card-img-top" alt="青花瓷">
                        <div class="card-body">
                            <h5 class="card-title">青花瓷</h5>
                            <p class="card-text">青花瓷又称白地青花瓷，常简称青花，是中国瓷器的主流品种之一，属釉下彩瓷。</p>
                            <a href="#" class="btn btn-outline-primary">了解更多</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card ceramic-card">
                        <img src="https://images.unsplash.com/photo-1549283675-b6c4b51a1d4f" class="card-img-top" alt="景德镇瓷器">
                        <div class="card-body">
                            <h5 class="card-title">景德镇瓷器</h5>
                            <p class="card-text">景德镇瓷器造型优美、品种繁多、装饰丰富、风格独特，以"白如玉，明如镜，薄如纸，声如磬"著称。</p>
                            <a href="#" class="btn btn-outline-primary">了解更多</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card ceramic-card">
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b" class="card-img-top" alt="彩陶">
                        <div class="card-body">
                            <h5 class="card-title">彩陶</h5>
                            <p class="card-text">彩陶是我国新石器时期广泛流行的一种精美陶器，是仰韶文化的一项卓越成就。</p>
                            <a href="#" class="btn btn-outline-primary">了解更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 历史发展 -->
    <section id="history" class="history-section">
        <div class="container">
            <h2 class="text-center section-title">陶瓷历史发展</h2>
            <div class="timeline">
                <div class="timeline-item left">
                    <div class="timeline-content">
                        <h3>新石器时代</h3>
                        <p>中国陶瓷的起源可以追溯到新石器时代，最早的陶器出现在约公元前6000年。</p>
                    </div>
                </div>
                <div class="timeline-item right">
                    <div class="timeline-content">
                        <h3>商周时期</h3>
                        <p>商代出现了原始瓷器，周代陶瓷工艺进一步发展，出现了印纹硬陶。</p>
                    </div>
                </div>
                <div class="timeline-item left">
                    <div class="timeline-content">
                        <h3>汉唐时期</h3>
                        <p>汉代陶瓷技术显著进步，唐代形成了"南青北白"的瓷器生产格局。</p>
                    </div>
                </div>
                <div class="timeline-item right">
                    <div class="timeline-content">
                        <h3>宋元时期</h3>
                        <p>宋代是中国陶瓷发展的鼎盛时期，五大名窑（汝、官、哥、钧、定）闻名于世。</p>
                    </div>
                </div>
                <div class="timeline-item left">
                    <div class="timeline-content">
                        <h3>明清时期</h3>
                        <p>明清时期景德镇成为全国制瓷中心，青花瓷、彩瓷等工艺达到顶峰。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 作品展示 -->
    <section id="gallery" class="py-5">
        <div class="container">
            <h2 class="text-center section-title">陶瓷作品展示</h2>
            <div id="ceramicCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#ceramicCarousel" data-bs-slide-to="0" class="active"></button>
                    <button type="button" data-bs-target="#ceramicCarousel" data-bs-slide-to="1"></button>
                    <button type="button" data-bs-target="#ceramicCarousel" data-bs-slide-to="2"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b" class="d-block w-100" alt="陶瓷作品1">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>青花山水纹瓶</h5>
                            <p>清代青花瓷代表作，绘制精细，釉色莹润</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://images.unsplash.com/photo-1549283675-b6c4b51a1d4f" class="d-block w-100" alt="陶瓷作品2">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>粉彩花鸟纹碗</h5>
                            <p>乾隆时期粉彩瓷器，色彩鲜艳，纹饰精美</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b" class="d-block w-100" alt="陶瓷作品3">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>钧窑天青釉盘</h5>
                            <p>宋代钧窑瓷器，釉色变幻莫测，独具特色</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#ceramicCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#ceramicCarousel" data-bs-slide="next">
                    <span class="carousel-control-prev-icon"></span>
                </button>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h5>关于我们</h5>
                    <p>致力于传播和弘扬中国陶瓷文化，展示陶瓷艺术的独特魅力。</p>
                </div>
                <div class="col-md-4">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#home" class="text-white">首页</a></li>
                        <li><a href="#types" class="text-white">陶瓷种类</a></li>
                        <li><a href="#history" class="text-white">历史发展</a></li>
                        <li><a href="#gallery" class="text-white">作品展示</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>联系我们</h5>
                    <p><i class="fas fa-map-marker-alt"></i> 中国景德镇陶瓷文化区</p>
                    <p><i class="fas fa-phone"></i> 123-456-7890</p>
                    <p><i class="fas fa-envelope"></i> info@ceramic-culture.com</p>
                </div>
            </div>
            <hr class="my-4">
            <div class="text-center">
                <p>&copy; 2023 陶瓷文化展示网站 版权所有</p>
            </div>
        </div>
    </footer>
</div>

<!-- 后台管理部分 -->
<div id="backend" class="d-none">
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 admin-sidebar">
                <h4 class="text-center mb-4">管理后台</h4>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#"><i class="fas fa-tachometer-alt me-2"></i>仪表板</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-list me-2"></i>陶瓷列表</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-plus me-2"></i>添加陶瓷</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-images me-2"></i>图片管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-cog me-2"></i>系统设置</a>
                    </li>
                    <li class="nav-item mt-4">
                        <a class="nav-link" href="#" onclick="showFrontend()"><i class="fas fa-arrow-left me-2"></i>返回前台</a>
                    </li>
                </ul>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-10 admin-panel">
                <div class="container-fluid">
                    <h2 class="mb-4">陶瓷信息管理</h2>

                    <!-- 数据统计 -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card text-white bg-primary">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>156</h4>
                                            <p>陶瓷总数</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-vase fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-white bg-success">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>12</h4>
                                            <p>陶瓷种类</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-list fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-white bg-warning">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>28</h4>
                                            <p>本月新增</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-chart-line fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-white bg-danger">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>3</h4>
                                            <p>待审核</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-clock fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 添加/编辑表单 -->
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-container">
                                <h4 class="mb-4">添加陶瓷信息</h4>
                                <form>
                                    <div class="mb-3">
                                        <label for="ceramicName" class="form-label">陶瓷名称</label>
                                        <input type="text" class="form-control" id="ceramicName" placeholder="请输入陶瓷名称">
                                    </div>
                                    <div class="mb-3">
                                        <label for="ceramicType" class="form-label">陶瓷类型</label>
                                        <select class="form-select" id="ceramicType">
                                            <option selected>请选择陶瓷类型</option>
                                            <option value="1">青花瓷</option>
                                            <option value="2">景德镇瓷器</option>
                                            <option value="3">彩陶</option>
                                            <option value="4">白瓷</option>
                                            <option value="5">黑陶</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label for="ceramicDescription" class="form-label">陶瓷描述</label>
                                        <textarea class="form-control" id="ceramicDescription" rows="3" placeholder="请输入陶瓷描述"></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label for="ceramicHistory" class="form-label">历史背景</label>
                                        <textarea class="form-control" id="ceramicHistory" rows="3" placeholder="请输入历史背景"></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label for="ceramicImage" class="form-label">上传图片</label>
                                        <input class="form-control" type="file" id="ceramicImage">
                                    </div>
                                    <div class="mb-3">
                                        <label for="ceramicDate" class="form-label">制作年代</label>
                                        <input type="text" class="form-control" id="ceramicDate" placeholder="请输入制作年代">
                                    </div>
                                    <button type="submit" class="btn btn-primary">提交</button>
                                    <button type="reset" class="btn btn-secondary">重置</button>
                                </form>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-container">
                                <h4 class="mb-4">图片预览</h4>
                                <div class="text-center">
                                    <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b" class="img-fluid mb-3" alt="预览图" id="imagePreview">
                                    <p class="text-muted">图片预览区域</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 切换前台和后台显示
    function showAdminPanel() {
        document.getElementById('frontend').classList.add('d-none');
        document.getElementById('backend').classList.remove('d-none');
    }

    function showFrontend() {
        document.getElementById('backend').classList.add('d-none');
        document.getElementById('frontend').classList.remove('d-none');
    }

    // 图片预览功能
    document.getElementById('ceramicImage').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').src = e.target.result;
            }
            reader.readAsDataURL(file);
        }
    });
</script>
</body>
</html>